<template>
  <div>
    <div
      v-for="itemm in menus" :key="itemm.meta.index">
      <template v-if="!itemm.children">
        <el-menu-item
        :index="itemm.meta.index+''"
        v-if="itemm.meta.show"
        @click="switchMenu(itemm.path)">
          <i :class="[itemm.meta.icon]"></i>
          <span>{{itemm.meta.title}}</span>
        </el-menu-item>
      </template>
      <template v-else>
        <el-submenu :key="itemm.meta.index" :index="itemm.meta.index+''">
          <template v-slot:title><i :class="[itemm.meta.icon]"></i><span>{{ itemm.meta.title }}</span></template>
          <el-menu-item
            v-for="it in noHasChild(itemm.children)" :key="it.meta.index"
            :index="it.meta.index+''"
            v-show="it.meta.show"
            @click="switchMenu(it.path)">
              <i :class="[it.meta.icon]"></i>
              <span>{{it.meta.title}}</span>
          </el-menu-item>
          <nav-menu :menus="hasChild(itemm.children)"></nav-menu>
        </el-submenu>
      </template>
    </div>
    <!-- <el-submenu v-for="item in menus" :key="item.meta.index" :index="item.meta.index+''">
      <template slot="title"><i :class="[item.meta.icon]"></i><span slot="title">{{ item.meta.title }}</span></template>
      <el-menu-item
        v-for="it in noHasChild(item.children)" :key="it.meta.index"
        :index="it.meta.index+''"
        v-show="it.meta.show"
        @click="switchMenu(it.path)">
          <i :class="[it.meta.icon]"></i>
          <span>{{it.meta.title}}</span>
      </el-menu-item>
      <nav-menu :menus="hasChild(item.children)"></nav-menu>
    </el-submenu> -->
  </div>
</template>

<script>
export default {
  name: 'menus',
  props: ['menus'],
  methods: {
    // 切换菜单
		switchMenu: function(com) {
			this.$router.push(com);
    },
    hasChild(data) {
      const res = [];
      data && data.length > 0 && data.map(it => {
        if(it.children && it.children.length > 0) {
          res.push(it);
        }
      })
      return res;
    },
    noHasChild(data) {
      const res = [];
      data && data.length > 0 && data.map(it => {
        if(!it.children) {
          res.push(it);
        }
      })
      return res;
    }
  }
}
</script>

<style lang="less">
  .el-menu--collapse {
    .el-menu-item span,
    .el-submenu .el-submenu__title span {
      width: 0;
      height: 0;
      overflow: hidden;
      display: inline-block;
    }
  }
  .el-menu--collapse .el-submenu .el-submenu__title .el-submenu__icon-arrow {
    display: none;
  }
</style>